<template>
	<view class="index-box clearfix bai" style="height:100%;">
		<!--头部导航-->
		<top :scrollTop = "scrollTop"></top>
		<!--内容开始-->
		<view class="works-content left clearfix">
			<view class="works-title left clearfix fixed" :style="'top:'+titleScrollTop+'px'">
				<view class="works-titles left">
					我的作品
				</view>
				
				<view class="works-so right clearfix">
					<label>
						<input placeholder="搜索关键词" v-model="keyword" maxlength="100" />
					</label>
					<label @click="setKeyword">
						<uni-icons type="search" size="25" color="#666"></uni-icons>
					</label>
					
				</view>
				
				<view class="works-shaixuan right clearfix relative" @mouseenter="showMenu2 = true" @mouseleave="showMenu2 = false">
					<label>时间排序</label>
					<label>
						<uni-icons :type="showMenu2==false?'bottom':'top'" size="13" color="#333"></uni-icons>
					</label>
					<view class="works-shaixuan-menu absolute" v-if="showMenu2 == true">
						<view class="works-shaixuan-item left" :style="order=='create_date desc'?'color:#2979ff':'color:#333'" @click="order = 'create_date desc'">
							最新
						</view>
						
						<view class="works-shaixuan-item left" :style="order=='create_date asc'?'color:#2979ff':'color:#333'"  @click="order = 'create_date asc'">
							最早
						</view>
						
						
					</view>
				</view>
				
				
				<view class="works-shaixuan right clearfix relative" @mouseenter="showMenu1 = true" @mouseleave="showMenu1 = false">
					<label>作品类型</label>
					<label>
						<uni-icons :type="showMenu1==false?'bottom':'top'" size="13" color="#333"></uni-icons>
					</label>
					<view class="works-shaixuan-menu absolute" v-if="showMenu1 == true">
						<view class="works-shaixuan-item left" @click="type = 'all'">
							全部
						</view>
						
						<view class="works-shaixuan-item left" @click="type = 'video'">
							视频
						</view>
						
						<view class="works-shaixuan-item left" @click="type = 'image'">
							图片
						</view>
						
					</view>
				</view>
				
				
			</view>
			
			<!--展示-->
			<view class="works-contents left clearfix">
				
				<view class="works-item left clearfix bai" v-for="(item,index) in data" v-if="data && data[0] && data[0]._id">
					<!-- <baidu-works-item :data="item" :index="index" v-if="item.type=='baidu-video'"></baidu-works-item> -->
					<works-item :data="item" @confirm="removeItem" :index="index"></works-item>
				</view>
				
				<view class="works-null-data left clearfix" v-else>
					<view>
						<uni-icons type="icon-wujilu" size="60" color="#999" custom-prefix="iconfont"></uni-icons>
					</view>
					<view>
						暂无作品
					</view>
				</view>
				
			</view>
			
			<view class="works-page left clearfix" v-if="data && data[0]">
				<uni-pagination :current="currentPage" :total="total" title="标题文字" :show-icon="true" @change="changePage" />
			</view>
			<!--发布-->
			<!-- <view class="works-publish left clearfix fixed">
				<publish></publish>
			</view> -->
		</view>
		
		<login :show="showLogin" @confirm="setUserinfo" @close="closeLogin"></login>
	</view>
</template>
<style>
	body,page{height:100%;}
</style>
<style scoped>
	.works-null-data view{line-height:35px;font-size:14px;color:#999;}
	.works-null-data{width:100%;height:200px;margin-top:200px;text-align: center;}
	.works-page{width:80%;line-height:50px;height:50px;margin-top:50px;margin-left:10%;}
	.works-item{margin-top:20px;margin-top:20px;border-bottom:1px solid #eee;padding-bottom:20px;padding-top:20px;}
	.works-publish{width:94%;min-height:150px;left:3%;right:0;bottom:5px;background:#fff;}
	.works-contents{width:90%;margin-left:5%;margin-top:20px;}
	.works-content{width:100%;background:#fff;border-radius: 20px;margin-top:65px;box-shadow: 0 4px 12px 0 rgba(36, 104, 242, .08);padding-bottom:100px;min-height:100%;}
</style>
<script>
	var db = uniCloud.database();
	import common from "@/static/js/common.js"
	export default {
		data() {
			return {
				titleScrollTop:65,
				keyword:'',
				scrollTop:0,
				showMenu1:false,
				showMenu2:false,
				userinfo:null,//登录信息
				data:[],//查询数据
				showLogin:false,
				total:0,//总数据
				currentPage:1,//当前页码
				order:'create_date desc',
				type:''
			}
		},
		onReady() {
			var that = this;
			window.onscroll = function() {
			  that.scrollTop = common.getScrollTop();
			};
		},
		onPageScroll(e){
			var scrollTop = e.scrollTop;
			if(scrollTop > 10){
				this.titleScrollTop = 50;
			}else if(scrollTop < 10){
				this.titleScrollTop = 65;
			}
		},
		watch:{
			"order"(val){
				this.showMenu2 =false;
				this.getDataList(false,1,val)
			},
			"type"(val){
				this.showMenu1 =false;
				this.getDataList(false,1,this.order,val);
			}
		},
		created() {
			var that = this;
			uni.getStorage({
				key:'login-userinfo',
				success:function(res){
					var userinfo = res.data;
					if(userinfo && userinfo._id){
						that.userinfo = userinfo;
					}else{
						that.showLogin = true;
					}
				},
				fail() {
					that.showLogin = true;
				}
			});
			
		},
		onLoad(e) {
			var page = e.page?e.page:1;
			var userinfo = this.userinfo;
			if(userinfo && userinfo._id){
				this.getDataList(userinfo._id,page);
			}
			
			if(e && e.type){
				this.type = e.type;
			}
			
			if(e && e.order){
				this.order = e.order;
			}
			
		},
		methods: {
			//根据关键词搜索
			setKeyword(){
				var keyword = this.keyword;
				this.getDataList(false,1,'create_date desc','all',keyword);
			},
			//删除选项以后
			removeItem(index){
				this.data.splice(index,1);
			},
			//点击分页以后
			changePage(e){
				var that = this;
				var page = e.current;
				that.getDataList(false,page,that.order,that.type);
			},
			//登录完以后
			setUserinfo(e){
				this.userinfo = e;
				this.showLogin = false;
			},
			//根据taskid获取最终的结果，默认3秒更新一次
			updateStatus(e){
				
				var index = e.index;
				var item = e.item;
				//获取id
				item._id = this.data[index]._id;
				this.data[index] = item;
			},
			//关闭登录
			closeLogin(val){
				this.showLogin = false;
			},
			//获取列表数据
			getDataList(uid=false,page=1,desc="create_date desc",type="all",keyword=''){
				if(!uid){
					uid = this.userinfo._id;
				}
				if(!uid){
					uni.showToast({
						title:'请先登录',
						icon:'none',
						duration:2000
					})
					return false;
				}
				if(page == 1){
					uni.showLoading({
						title:'加载中'
					})
				}
				if(uid){
					if(type == 'all' || type==''){
						var where = {uid:uid}
					}else{
						var where = {uid:uid,type:type}
					}
					
					if(keyword){
						var where = db.command.and(
							db.command.or({
									title: new RegExp(keyword, 'i') // 字段一
								}, {
									content: new RegExp(keyword, 'i') // 字段二
								},{
									label: new RegExp(keyword, 'i')
								}),
								where
						)
					}
					
					var skip = (page - 1) * 10;
						db.collection('create_result').where(where).orderBy(desc).skip(skip).limit(10).get({getCount:true}).then(res=>{
							console.log('查询结果',res);
							this.data = res.result.data;
							this.total = res.result.count;
							this.currentPage = parseInt(page);
							uni.hideLoading()
						});
					
				}else{
					this.showLogin = true;
				}
				
			},
		}
	}
</script>


